CSS navigacioni meni problem

[ _MISA_ @ 09.09.2014. 14:24 ] @

Radnim jednu aplikaciju u ASP.netu. Imam problem sa navigacionim menijem pisanim u HTML i CSS, tacnije sa samim CSS.

Na slici vidite u cemu je problem. Taj ugnjezdeni li sa svojim elementima mi pravi problem. Ide malo u desno i ne mogu to da namestim da bude u liniji sa gornjim li. Takodje me nervira sto ne znam odakle mu tolko puno mesta ispred i iza u divu za ugnjezdeni li.

Jel moze neko da mi sredi to da stoji u liniji i da nema tolko prostora napred i nazad?

Code:

<div id="nav" runat="server">
            <nav>
            <ul runat="server" id="ListVisitor">
                <li id="Li_Login" runat="server"><a href="Login.aspx" id="LoginHref" runat="server">
                    Login</a>
                    <div>
                <ul>
                    <li><a href="products.html#chair">Chair</a></li>
                    <li><a href="products.html#table">Table</a></li>
                    <li><a href="cooker.html">Cooker</a></li>
                </ul>
            </div>

                    </li>
                <li id="Li_Register" runat="server"><a href="Register.aspx" id="RegisterHref" runat="server">
                    Register</a></li>
                <li id="Li_Recover" runat="server"><a href="Recover.aspx" id="ForgotPasswordHref"
                    runat="server">Forgot Password</a></li>
            </ul>

</div>

css

Code:

/*  OVO mi je stil za navigaciju u CSSu */

nav
        {
            position: relative;
            background: #005e9c url(images/img02n.jpg) repeat-x top left;
            margin: 0;
            padding: 0;
            height: 60px;
            width: 100%;
        }

        nav ul
        {
            list-style: none;
            padding-top: 12px;
            position: relative;
        }

        nav ul li
        {
            padding: 5px 8px 5px 8px;
            margin-right: 0px;
            display: inline-block;
        }

        nav ul li.active, nav ul li li.active
        {
            background: #005e9c;
            border-top: solid 1px white;
            border-bottom: solid 1px white;
            border-left: solid 1px white;
            border-right: solid 1px white;
            border-radius: 5px;
            padding-top: 4px;
            padding-bottom: 4px;
            position: relative;
        }


        nav > ul > li > a > .caret
        {
            content: "";
            display: inline-block;
            height: 0;
            width: 0;
            vertical-align: middle;
            -webkit-transition: color 0.1s linear;
            -moz-transition: color 0.1s linear;
            -o-transition: color 0.1s linear;
            transition: color 0.1s linear;
            border-bottom: solid 1px white;
        }

        nav > ul > li > a
        {
            text-decoration: none;
            color: #FFFFFF;
            letter-spacing: -1px;
            font-size: 1.25em;
            display: block;
        }

        nav > ul > li:hover
        {
            background: #005e9c;
            border-top: solid 1px white;
            border-bottom: solid 1px white;
            border-left: solid 1px white;
            border-right: solid 1px white;
            border-radius: 5px;
            padding-top: 4px;
            padding-bottom: 4px;
        }

        nav > ul > li:hover > a
        {
            color: rgb( 255, 255, 255 );
            font-weight: none;
        }

        nav > ul > li:hover > a > .caret
        {
            border-top-color: rgb( 255, 255, 255 );
            font-weight: none;
        }

        nav > ul > li > div
        {
            background: #005e9c;
            border-top: solid 1px white;
            border-bottom: solid 1px white;
            border-left: solid 1px white;
            border-right: solid 1px white;
            border-radius: 5px;
            padding-top: 4px;
            padding-bottom: 4px;
            position: absolute;
            width: 165px;
            visibility: hidden;
            z-index: 10;
            -webkit-transiton: opacity 0.2s;
            -moz-transition: opacity 0.2s;
            -ms-transition: opacity 0.2s;
            -o-transition: opacity 0.2s;
            -transition: opacity 0.2s;
        }

        nav > ul > li:hover > div
        {
            display: block;
            opacity: 1;
            visibility: visible;
        }

        nav > ul > li > div ul > li
        {
            display: block;
        }

        nav > ul > li > div ul > li > a
        {
            color: #fff;
            display: block;
            padding: 0px 0px;
            text-decoration: none;
        }

        nav > ul > li > div ul > li:hover > a
        {
            background-color: rgba( 255, 255, 255, 0.1);
        }

ovako bi trebalo da bude: