How to align nav drop down menu in css?

Question

I have been created simple nav drop down menu.. But still i am not completed.

Here is my html and css working jsfiddle: http://jsfiddle.net/rym2zku1/

When i hover catalog link, i need to show it shows like this: enter image description here

html:

<nav id="navWrap" role="navigation">
 <ul id="nav">
  <li class="nav-item first active">
    <a class="nav-item-link" href="/">Home</a>                
  </li>
  <li class="nav-item">
  <a class="nav-item-link" href="catalog.html">Catalog</a>  
  <ul>
  <li><a href="#">Data Listing</a></li>
  <li><a href="#">Web Scheduling</a></li>
  <li><a href="#">Google Maps Application</a></li>
  </ul>         
  </li>
<li class="nav-item">
<a class="nav-item-link" href="/blogs/news">Blog</a>                
 </li>
<li class="nav-item">
<a class="nav-item-link" href="/pages/about-us">About Us</a>                
</li>
</ul>
</nav>

Any help would be highly appreciated. thanks in advance

T Kanagaraj · Accepted Answer · 2015-02-04 05:13:48Z

2

I have writtern my code in Here in JsFiddle

<body>
    <div class="container">
      <h2>Dropdowns</h2>
      <p></p>
      <p></p>                                          
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
        <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
        </ul>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>

answered Feb 4, 2015 at 5:13

T Kanagaraj

2455 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4065001 Over a year ago

I need when i hover the link,

Ragesh Kr Over a year ago

Instead of Hover its just a click, play around with the mentioned js and css file. people are here to help. Not to do the work for you.

nalinc · Accepted Answer · 2015-02-04 05:37:57Z

1

Is this what you are looking for ?

Updated Screenshot

You just need to add this css property to the dropdown <ul>

  .nav-item  ul{
      padding:inherit;
      border: 1px solid black;
      text-align:left;
      border-radius:4px;
    }

Here's the fiddle.

Cheers!

edited Feb 4, 2015 at 5:37

answered Feb 4, 2015 at 5:19

nalinc

7,43327 silver badges34 bronze badges

7 Comments

user4065001 Over a year ago

thanks.. i applied your answer in my page.. but still i didn't get it.. now it shows like this s9.postimg.org/81u3cyzj3/Untitled_1.png.. i need like my posted image in my question.

nalinc Over a year ago

You just need to add "text-align:left;" to the css class I mentioned above. Here's the updated fiddle[ jsfiddle.net/nalinc/rym2zku1/9 ]

user4065001 Over a year ago

how can i remove border-radius:4px; when hover state?

nalinc Over a year ago

on which hover state ? While hovering the nav-item (Catalog)? or while hovering the item in dropdown (Data Listing)?

user4065001 Over a year ago

I got it @nln.. thanks.. and another one thing is, border-top and border-bottom already have in my existing source.. so when use your code without border top and bottom showed like this s24.postimg.org/nerarsnlh/Untitled_1.png.. so i need to do some alignment.. can you please help me?

|

Tushar · Accepted Answer · 2015-02-04 05:07:39Z

1

Add this code in CSS

Updated Code

#nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
}
#nav li:hover ul {
    display: block;
}

answered Feb 4, 2015 at 5:07

Tushar

4,4165 gold badges26 silver badges39 bronze badges

1 Comment

user4065001 Over a year ago

@Tushar: But posted my sample image , the dropdown menu having box like border right,,, so how can i achieve that one? thanks

Ram kumar · Accepted Answer · 2015-02-04 06:04:25Z

nav ul,nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
  .nav-item  ul{
      padding:0;
      border: 1px solid black;
      text-align:left;

    }
.nav-item  ul li{padding: 0;}
  .nav-item  ul li:hover{
      background-color:#d1d1d1;
    }
.nav-bar {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .nav-bar--left {
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: left;
  }

  .nav-bar--left .grid-item {
    float: none;
    display: table-cell;
    vertical-align: middle;
  }
}
#nav {
  position: relative;
  display: block;
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
  font-family: "Raleway","HelveticaNeue","Helvetica Neue",sans-serif;
  white-space: nowrap;
}

.nav-bar--left #nav {
  margin: 1em 0 0;
  text-align: right;
}

@media screen and (max-width: 768px) {
  #nav,.nav-bar--left #nav {
    width: 100%;
    white-space: normal;
    margin: 20px 0 10px;
    text-align: inherit;
  }
}

.nav-item {
  position: relative;
  display: inline-block;
  padding: 2px 30px;
}

@media screen and (max-width: 768px) {
  .nav-item {
    padding: 10px 20px;
  }
}

#nav>.nav-item {
  border-left: 1px solid #e8e8e8;
}

#nav>.nav-item.first {
  border-left: none;
  padding-left: 0;
}

@media screen and (max-width: 768px) {
  #nav>.nav-item {
    border: 0 none;
  }
}

.nav-item-link {
  display: inline-block;
  color: #211f1f;
  font-size: 14px;
  zoom: 1;
  *display: inline;
}

.nav-item-link:hover {
  color: #333;
}

.nav-item-link .nav-item.active .nav-item-link {
  color: #333333;
}

.sub-nav .sub-nav {
  display: none !important;
}
.supports-no-csstransforms .sub-nav {
  white-space: normal;
  width: 200px;
  margin-left: -100px;
}

.sub-nav:before {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  right: 47%;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #211f1f;
  z-index: 40;
}


.sub-nav-item,#moreMenu--list .nav-item {
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #211f1f;
}

.sub-nav-item.first,#moreMenu--list .nav-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.sub-nav-item.last,#moreMenu--list .nav-item:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.sub-nav-item-link,#moreMenu--list .nav-item .nav-item-link {
  display: block;
  padding: 15px 20px;
  margin: 0;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid #0b0a0a;
}

.sub-nav-item-link.first,.sub-nav-item-link:first-child,#moreMenu--list .nav-item .nav-item-link.first,#moreMenu--list .nav-item .nav-item-link:first-child {
  border-top: none;
}

.sub-nav-item-link:hover,.sub-nav-item-link:focus,#moreMenu--list .nav-item .nav-item-link:hover,#moreMenu--list .nav-item .nav-item-link:focus {
  color: #ffffff;
  border-top: 1px solid #0b0a0a;
  background-color: #0b0a0a;
}

.sub-nav-item-link:hover.first,.sub-nav-item-link:hover:first-child,.sub-nav-item-link:focus.first,.sub-nav-item-link:focus:first-child,#moreMenu--list .nav-item .nav-item-link:hover.first,#moreMenu--list .nav-item .nav-item-link:hover:first-child,#moreMenu--list .nav-item .nav-item-link:focus.first,#moreMenu--list .nav-item .nav-item-link:focus:first-child {
  border-top: none;
}
#nav {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center
}
#nav a {
    text-decoration: none;
    color: #666;
    display: inline-block;
    padding: 10px;
    font-size: 13px;
}
#nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    text-align: left;
    width: 170px;
    border: 1px solid #ccc;
    display: none;
}

#nav li:hover ul {
    display: block;
}

 <nav id="navWrap" role="navigation">
                  <ul id="nav">
                     <li class="nav-item first active">
                        <a class="nav-item-link" href="/">Home</a>                
                     </li>
			 <li class="nav-item">
                        <a class="nav-item-link" href="catalog.html">Catalog</a>  
				<ul>
				   <li><a href="#">Data Listing</a></li>
				   <li><a href="#">Web Scheduling</a></li>
				   <li><a href="#">Google Maps Application</a></li>
				</ul>         
			  </li>

                     <li class="nav-item">
                        <a class="nav-item-link" href="/blogs/news">Blog</a>                
                     </li>
                     <li class="nav-item">
                        <a class="nav-item-link" href="/pages/about-us">About Us</a>                
                     </li>
                  </ul>
               </nav>

but.. when i hover, the dropdown lists are need to display exact position. i mean sublists are display in same align of catalog..
it will be positioned as parent li. You can remove position:relative from li and put in ul.
and another one thing is, border-top and border-bottom already have in my existing source.. so when use your code without border top and bottom showed like this s24.postimg.org/nerarsnlh/Untitled_1.png.. so i need to do some alignment.. can you please help me?
Need to check your css code... Maybe border not implemented now or override.

Ram kumar · Accepted Answer · 2015-02-04 06:34:42Z

nav ul,nav ol {
      list-style: none;
      margin: 0;
      padding: 0;
    }
      .nav-item  ul{
          padding:0;
          border: 1px solid black;
          text-align:left;

        }
    .nav-item  ul li{padding: 0;}
      .nav-item  ul li:hover{
          background-color:#d1d1d1;
        }
    .nav-bar {
      text-align: center;
position: relative;
    }
    @media screen and (min-width: 769px) {
      .nav-bar--left {
        display: table;
        table-layout: fixed;
        width: 100%;
        text-align: left;
      }

      .nav-bar--left .grid-item {
        float: none;
        display: table-cell;
        vertical-align: middle;
      }
    }
    #nav {
      position: relative;
      display: block;
      list-style-type: none;
      padding: 0;
      margin: 20px 0;
      font-family: "Raleway","HelveticaNeue","Helvetica Neue",sans-serif;
      white-space: nowrap;
    }

    .nav-bar--left #nav {
      margin: 1em 0 0;
      text-align: right;
    }

    @media screen and (max-width: 768px) {
      #nav,.nav-bar--left #nav {
        width: 100%;
        white-space: normal;
        margin: 20px 0 10px;
        text-align: inherit;
      }
    }

    .nav-item {
      display: inline-block;
      padding: 2px 30px;
    }

    @media screen and (max-width: 768px) {
      .nav-item {
        padding: 10px 20px;
      }
    }

    #nav>.nav-item {
      border-left: 1px solid #e8e8e8;
    }

    #nav>.nav-item.first {
      border-left: none;
      padding-left: 0;
    }

    @media screen and (max-width: 768px) {
      #nav>.nav-item {
        border: 0 none;
      }
    }

    .nav-item-link {
      display: inline-block;
      color: #211f1f;
      font-size: 14px;
      zoom: 1;
      *display: inline;
    }

    .nav-item-link:hover {
      color: #333;
    }

    .nav-item-link .nav-item.active .nav-item-link {
      color: #333333;
    }

    .sub-nav .sub-nav {
      display: none !important;
    }
    .supports-no-csstransforms .sub-nav {
      white-space: normal;
      width: 200px;
      margin-left: -100px;
    }

    .sub-nav:before {
      content: '';
      display: block;
      position: absolute;
      top: 5px;
      right: 47%;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid #211f1f;
      z-index: 40;
    }


    .sub-nav-item,#moreMenu--list .nav-item {
      display: block;
      overflow: hidden;
      padding: 0;
      margin: 0;
      background-color: #211f1f;
    }

    .sub-nav-item.first,#moreMenu--list .nav-item:first-child {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .sub-nav-item.last,#moreMenu--list .nav-item:last-child {
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    .sub-nav-item-link,#moreMenu--list .nav-item .nav-item-link {
      display: block;
      padding: 15px 20px;
      margin: 0;
      color: #ffffff;
      text-align: center;
      border-top: 1px solid #0b0a0a;
    }

    .sub-nav-item-link.first,.sub-nav-item-link:first-child,#moreMenu--list .nav-item .nav-item-link.first,#moreMenu--list .nav-item .nav-item-link:first-child {
      border-top: none;
    }

    .sub-nav-item-link:hover,.sub-nav-item-link:focus,#moreMenu--list .nav-item .nav-item-link:hover,#moreMenu--list .nav-item .nav-item-link:focus {
      color: #ffffff;
      border-top: 1px solid #0b0a0a;
      background-color: #0b0a0a;
    }

    .sub-nav-item-link:hover.first,.sub-nav-item-link:hover:first-child,.sub-nav-item-link:focus.first,.sub-nav-item-link:focus:first-child,#moreMenu--list .nav-item .nav-item-link:hover.first,#moreMenu--list .nav-item .nav-item-link:hover:first-child,#moreMenu--list .nav-item .nav-item-link:focus.first,#moreMenu--list .nav-item .nav-item-link:focus:first-child {
      border-top: none;
    }
    #nav {
        border: 1px solid #ccc;
        text-align: center
        position: relative;
    }
    #nav a {
        text-decoration: none;
        color: #666;
        display: inline-block;
        padding: 10px;
        font-size: 13px;
    }
    #nav ul {
        position: absolute;
        top: 100%;
        left: -1px;
        text-align: left;
        border: 1px solid #ccc;
        display: none;
right: -1px;

    }

    #nav li:hover ul {
        display: block;
    }

<nav id="navWrap" role="navigation">
                      <ul id="nav">
                         <li class="nav-item first active">
                            <a class="nav-item-link" href="/">Home</a>                
                         </li>
    			 <li class="nav-item">
                            <a class="nav-item-link" href="catalog.html">Catalog</a>  
    				<ul>
    				   <li><a href="#">Data Listing</a></li>
    				   <li><a href="#">Web Scheduling</a></li>
    				   <li><a href="#">Google Maps Application</a></li>
    				</ul>         
    			  </li>

                         <li class="nav-item">
                            <a class="nav-item-link" href="/blogs/news">Blog</a>                
                         </li>
                         <li class="nav-item">
                            <a class="nav-item-link" href="/pages/about-us">About Us</a>                
                         </li>
                      </ul>
                   </nav>

Collectives™ on Stack Overflow

How to align nav drop down menu in css?

5 Answers 5

2 Comments

7 Comments

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

7 Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related