CODEWITHSUNDEEP
htmlcsscss-float
toniitony
toniitony

Reputation: 93

Horizontal SubMenu

I'd like to create a horizontal sub-menu navigation bar that appears below the initial navigation bar when I hover above the appropriate menu item. I am not able to make the dropbown submenu appear horizontal, and after messing around with display:inline, both top-menu and sub-menu now appear jumbled together. I've posted my css below.

#nav{
 margin: 0 ; padding: 0;
 text-align: center;}
#nav li {
 list-style: none;
 margin: 0 auto;
 position: relative;
 display: inline;}
#nav li a{
 padding: 1em 2em;
 display: inline-block;
 text-decoration: none;
 color: #F2583E ;
 font-family: 'Helvetica Neue';
 font-size:1.25em;}


/*SubMenu*/
    #nav li ul{
     display: inline;
     position: relative;
     left: 0;
     padding: 0; margin:0 100;}
    #nav li:hover > ul{
    }
    #nav li ul li, #nav li ul li a{
     display: inline;}
    #nav li ul li{ 
     _display: inline; /* for IE5*/}
    #nav li ul li a{
      width: 150px;}

This is my html code.

   <body>              
 <div class="slide-down-page">
  <ul id="nav">
    <li><a class="active btn" href="home.html">Bio</a></li>
    <li><a href="portfolio.html">Portfolio</a>
        <ul>
            <li><a href="#">Writing</a>
            </li>
            <li><a href="#">Illustrations</a></li>
            <li><a href="#">Design</a></li>
        </ul> 

    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>
    </div>
        </body>

Upvotes: 4

Views: 3269

Answers (1)

CreativePS
CreativePS

Reputation: 1093

Please find the updated code below, hope it will resolve your issue. let me know any further problem you face.

#nav{
 margin: 0 ; padding: 0; position:fixed; width:100%; background:#e7e7e7}
#nav li {
 list-style: none;
 display: inline-block; float:left}
#nav li a{
 padding:10px 20px;
 display: inline-block;
 text-decoration: none;
 color: #F2583E ;
 font-family: 'Helvetica Neue';
 font-size:1.25em; background:#e7e7e7;}
#nav li a:hover{background:#bababa;}
/*SubMenu*/
#nav li:hover ul{display:block;position:absolute; top:43px; width:100%; left:0px; background:#bababa;}
#nav li ul{
 display: none;}
#nav li:hover ul li, #nav li:hover ul li a{
 display: inline-block; float:left; padding:5px; background:#bababa}
#nav li ul li{ 
 _display: inline-block; /* for IE5*/}
#nav li ul li a{
  width: 150px;}
   <body>              
 <div class="slide-down-page">
  <ul id="nav">
    <li><a class="active btn" href="home.html">Bio</a></li>
    <li><a href="portfolio.html">Portfolio</a>
        <ul>
            <li><a href="#">Writing</a>
            </li>
            <li><a href="#">Illustrations</a></li>
            <li><a href="#">Design</a></li>
        </ul> 

    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>
    </div>
        </body>

Upvotes: 2

Related Questions