Super Quick CSS&HTML: 2 Nav Bars + Sub Nav -
i'm new css , hope response on how style page has 2 nav bars (side side).
1 side (nav bar on left) has :login , register
1 side (nav bar on right) has: add merchant, add business, business centre, trending (and trending, there's sub menu words , data)
i'm unable to:
- have right nav bar sit on same row left nav bar
- have sub menu words , data fall nicely under trending
please cos i've been trying figure out day!
<ul id="navleft"> <li> <a href='/user/login.php'>login</a></li> <li> <a href='/user/register.php'>register</a> </li> </ul> </nav> <ul id="navright"> <li> <a href=/ user/addreview.php>add review</a> </li> <li> <a href=/ user/addbusiness.php>add business</a> </li> <li> <a href=/ business/businesscentre.php>business centre</a></li> <li> <a href=/ user/trending.php>trending</a> <ul id="navrightsub"> <li> <a href=/ user/trendingwords.php>words</a> </li> <li> <a href=/ user/trendingareas.php>areas</a> </li> </li> </ul> </ul>
css format:
a { font-family: arial; font-size: 15px; text-decoration: none; padding: 5px; } /* make text bigger , no underline*/ a:hover { cursor: pointer; color: #ff4500; } /* make text change color when hovered over*/ #navleft { list-style: none; width: 100%; background-color: #f5f5f5; padding: 5px; } /* grey nav bar*/ #navleft li { display: inline-block; } /* list inside grey nav bar*/ #navright li { list-style: none; display:inline-block; } /*this list inside in navright bar*/ #navrightsub
you have learn lot of things like, how use float elements, position proterties , styling on. have modified code , make working.
html
<ul id="navleft"> <li> <a href='/user/login.php'>login</a></li> <li> <a href='/user/register.php'>register</a> </li> </ul> <ul id="navright"> <li> <a href=/ user/addreview.php>add review</a> </li> <li> <a href=/ user/addbusiness.php>add business</a> </li> <li> <a href=/ business/businesscentre.php>business centre</a></li> <li> <a href=/ user/trending.php>trending</a> <ul id="navrightsub"> <li> <a href=/ user/trendingwords.php>words</a> </li> <li> <a href=/ user/trendingareas.php>areas</a> </li> </ul> </li> </ul>
css
a { font-family: arial; font-size: 15px; text-decoration: none; padding: 5px; } a:hover { color: #ff4500; } #navleft { list-style: none; background-color: #f5f5f5; padding: 5px; } #navleft li { display: inline-block; } #navright li { list-style: none; position:relative; display:inline-block; } #navright li ul{display:none;} #navright li:hover ul{display:block;} #navright li ul{position:absolute; top:20px; left:-35px;} #navleft{float:left; padding:0;margin:0;} #navright{float:right; padding:0; margin:0;}
Comments
Post a Comment