SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    0 Post(s)
    0 Thread(s)

    Move Search box to the right of menu bar

    Hi all, I'm trying to create a search box that is located in the far right of the menu bar, and i want to remove the hover effect of the search box.
    Sorry for my bad english, to know what i mean, you can see the picture below


    menu bar: HTML

    HTML Code:
    <ul id="nav">
        <li><a href="">Trang chủ</a></li>
         <li><a href="">Game</a></li>
       <li><a href="">Phim</a></li>
        <li><a href="">Phần mềm</a></li>
        <li><a href="">Truyện</a></li>
        <li><a href="">Ảnh Đẹp</a></li>
        <li><a class="hsubs" href="">Thủ thuật »</a>
            <ul class="subs">
                <li><a href="">Windows</a></li>
                <li><a href="">Hack CSO</a></li>
    <li class=”last-nav-list-item nav-list-item”>
    <form id="search-blog" method="get" action="/search">
                <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
               <input type="image" src="" id="sbutton" />
    menu bar: CSS

    HTML Code:
    #nav,#nav ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    #nav {
        background: url('background.png') no-repeat scroll 0 0 transparent;
        clear: both;
        font-size: 12px;
        height: 50px;
        padding: 0 0 0 9px;
        position: relative;
        width: 1100px;
    #nav ul {
        background-color: #222;
        border:1px solid #222;
        border-width: 0 1px 1px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
        left: -9999px;
        position: absolute;
        top: -9999px;
        z-index: 2;
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -o-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -moz-transition: -moz-transform 0.1s linear;
        -ms-transition: -ms-transform 0.1s linear;
        -o-transition: -o-transform 0.1s linear;
        -webkit-transition: -webkit-transform 0.1s linear;
        transition: transform 0.1s linear;
    #nav li {
        background: url('menu_line.png') no-repeat scroll right 5px transparent;
        float: left;
        position: relative;
    padding-top: 2px;
    #nav li a {
        color: #FFFFFF;
        display: block;
        float: left;
        font-weight: bold;
        height: 32px;
        padding: 15px 20px 0;
        position: relative;
        text-decoration: none;
        text-shadow: 2px 2px 2px #000000;
    #nav li:hover > a {
        color: #00B4FF;
    #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
        background: none repeat scroll 0 0 #121212;
        outline: 0 none;
    #nav li:hover ul.subs {
        left: 0;
        top: 48px;
        width: 180px;
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    #nav ul li {
        background: none;
        width: 100%;
    #nav ul li a {
        float: none;
    #nav ul li:hover > a {
        background-color: #121212;
        color: #00B4FF;
    Thanks you in advance

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    NJ, USA
    65 Post(s)
    2 Thread(s)
    Based on the code posted above:

    1) The search box is the last item in the nav list; therefore, it is picking up the :hover behavior just like the other members of the nav list. Remove it from the nav list and the :hover background will stop.

    2) You will have to choose another, more appropriate technique to position the search box at the right end of that list.

    3) The classes assigned to the last-nav-list-item are surrounded by "smart quotes" and are not being recognized. The "smart quotes" need to be replaced by standard ASCII double quotes """

    I do not actually see a :hover background issue on your web site.

    Hope this is helpful.

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    0 Post(s)
    0 Thread(s)
    Thank you. I'll try it


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts