Css dropdown menu display, long text - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Dropdown

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Dropdown

Description

Css dropdown menu display, long text

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, co</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
#primary_nav_wrap<!--from  w  ww . j av a 2 s. c o  m-->
 {
   margin-top:16px
}

#primary_nav_wrap ul
 {
   list-style:none;
   position:relative;
   float:left;
   margin:0;
   padding:0
}

#primary_nav_wrap ul a
 {
   display:block;
   color:Chartreuse;
   text-decoration:none;
   font-weight:701;
   font-size:13px;
   line-height:33px;
   padding:0 16px;
   font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
 {
   position:relative;
   float:left;
   margin:0;
   padding:0
}

#primary_nav_wrap ul li.current-menu-item
 {
   background:yellow;
}

#primary_nav_wrap ul li:hover
 {
   background:blue;
}

#primary_nav_wrap ul ul
 {
   display:none;
   position:absolute;
   top:100%;
   left:0;
   background:pink;
   padding:0
}

#primary_nav_wrap ul ul li
 {
   float:none;
   width:201px
}

#primary_nav_wrap ul ul a
 {
   line-height:121%;
   padding:11px 16px
}

#primary_nav_wrap ul ul ul
 {
   top:0;
   left:100%
}

#primary_nav_wrap ul li:hover>ul
 {
   display:block
}
</style> 
 </head> 
 <body translate="no"> 
  <h1>Lorem ipsum dolor sit amet, co</h1> 
  <nav id="primary_nav_wrap"> 
   <ul> 
    <li class="current-menu-item"> <a href="#">Lore</a> </li> 
    <li> <a href="#">Lorem </a> 
     <ul> 
      <li> <a href="#">Lorem ipsu</a> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
      <li> <a href="#">Lorem ipsu</a> 
       <ul> 
        <li> <a href="#">Lorem ipsum</a> 
         <ul> 
          <li> <a href="#">Lorem ipsu</a> </li> 
          <li> <a href="#">Lorem ipsu</a> </li> 
          <li> <a href="#">Lorem ipsu</a> </li> 
          <li> <a href="#">Lorem ipsu</a> </li> 
         </ul> </li> 
        <li> <a href="#">Lorem ipsum</a> </li> 
       </ul> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem </a> 
     <ul> 
      <li> <a href="#">Lorem ipsu</a> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem </a> 
     <ul> 
      <li class="dir"> <a href="#">Lorem ipsu</a> </li> 
      <li class="dir"> <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ull</a> 
       <ul> 
        <li> <a href="#">Lorem ipsu</a> </li> 
        <li> <a href="#">Lorem ipsu</a> </li> 
        <li> <a href="#">Lorem ipsu</a> </li> 
        <li> <a href="#">Lorem ipsu</a> </li> 
        <li> <a href="#">Lorem ipsu</a> </li> 
       </ul> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem </a> </li> 
    <li> <a href="#">Lorem </a> </li> 
    <li> <a href="#">Lorem </a> </li> 
    <li> <a href="#">Lorem ipsu</a> </li> 
   </ul> 
  </nav>  
 </body>
</html>

Related Tutorials