Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>try this css styles in this style using color for individual menu, u can try shadow to set instead of color...</p> <p>HTMl Code</p> <pre><code>&lt;div class="menu"&gt; &lt;ul&gt; &lt;li class="active1"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Product&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>CSS Style</p> <pre><code>.menu{ font-family:Arial, Helvetica, sans-serif; color:white; float:left; position:absolute; top:95px; width:855px; background-image:url(../images/bottom-menu-line.png); background-position:center bottom; background-repeat:no-repeat; } .menu ul{padding:0; margin-left:65px; border-radius:10px;} .menu ul li { float:left; border-radius:10px; width:110px; height:47px; list-style:none; padding:0; margin-left:5px; margin-right:5px; /*overflow:hidden*/ } .menu ul li a { font-size:12px; color:#fffcc7; background-image:url(../images/button.png); background-position:center; height:47px; overflow:hidden; line-height:47px; text-decoration:none; width:110px; text-align:center; float:left; border-radius:10px; } .menu li {float:left; padding:0;} .menu ul li a:hover { margin: -3px; } .menu ul li:nth-of-type(6) a:hover { border:3px solid #c10202 !important; border-radius:10px !important; } .menu ul li:nth-of-type(5) a:hover { border:#c1d65f solid 3px; border-radius:10px; } .menu ul li:nth-of-type(4) a:hover { border:#01d290 solid 3px; border-radius:10px; } .menu ul li:nth-of-type(3) a:hover { border:#904ca1 solid 3px; border-radius:10px; } .menu ul li:nth-of-type(2) a:hover { border:#00caf3 solid 3px; border-radius:10px; } .menu ul li:nth-of-type(1) a:hover { border:3px #d44c1f solid; border-radius:10px; } .active1{ border:3px #d44c1f solid; width:110px !important; border-radius:10px; height:47px !important; margin-bottom:7px !important; margin-right:5px !important; } .active2{ border:#00caf3 solid 3px; width:110px !important; border-radius:10px; height:47px !important; margin-bottom:7px !important; margin-right:5px !important; } .active3{ border:#904ca1 solid 3px; width:110px !important; border-radius:10px; height:47px !important; margin-bottom:7px !important; margin-right:5px !important; } .active4{ border:#01d290 solid 3px; width:110px !important; border-radius:10px; height:47px !important; margin-bottom:7px !important; margin-right:5px !important; } .active5{ border:#c1d65f solid 3px; width:110px !important; border-radius:10px; height:47px !important; margin-bottom:7px !important; margin-right:5px !important; } .active6{ border:3px solid #c10202; width:110px !important; border-radius:10px; height:47px !important; margin-bottom:7px !important; margin-right:5px !important; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload