Наличие в моем макете странного символа для выпадающей панели навигации - PullRequest
Новая
       17

Наличие в моем макете странного символа для выпадающей панели навигации

0 голосов
/ 29 февраля 2012

У меня есть панель навигации, в которой есть выпадающее меню со стилизованными тегами. Вот пример тестовой страницы: http://www.problemio.com/problems/problem_dev.php?problem_id=161

Чего я не понимаю, так это откуда взялась белая разделительная полоса и как заставить ее исчезнуть или сделать ее более привлекательным разделителем. И почему при наведении указателя мыши на категории появляется выпадающий список под ссылкой "добавить проблему"?

Вот HTML-код для этого div: 

        <div class="menusystem" id="site_nav">

            <ul class="main_menu_ul"> <!-- The entire nav thing -->

                <li class="main_menu_li"><a style="color: white;" href="http://www.problemio.com/add_problem.php">Post a Problem</a>
                </li>

                <li class="main_menu_li_left"><a style="color: white;" href="http://www.problemio.com/problems/categories.php">Problem Categories</a> 
                    <ul class="child_menu_ul"> 
                        <li class="first"><a href="http://www.problemio.com/category.php?category_id=1">Health and Medicine</a></li> 
                        <li><a href="http://www.problemio.com/category.php?category_id=62">Environment</a></li>
                        <li><a href="http://www.problemio.com/category.php?category_id=7">Business</a></li>
                        <li><a href="http://www.problemio.com/category.php?category_id=4">Education</a></li>
                        <li><a href="http://www.problemio.com/category.php?category_id=2">Politics</a></li>
                        <li><a href="http://www.problemio.com/category.php?category_id=12">Art</a></li>
                        <li><a href="http://www.problemio.com/category.php?category_id=3">Local</a></li>
                        <li><a href="http://www.problemio.com/category.php?category_id=5">Technology</a></li>
                        <li><a href="http://www.problemio.com/category.php?category_id=46">Entertainment</a></li>
                        <li class="last"><a href="http://www.problemio.com/category.php?category_id=14">Social Issues</a></li>
<!--                        <li><a href="http://www.problemio.com/problems/all_problems.php">All Problems</a></li>
-->                         
                    </ul> 
                </li>
            </ul>



    </div> <!-- Closing menusystem div -->

и вот стиль CSS для этого div: 

.menusystem 
{
    position: absolute;
    font-size: 1em;
    color: white;
}

.menusystem ul, .menusystem li 
{
    margin: 0;
    padding: 0;
}
.menusystem li 
{
    list-style: none outside none;
}

.menusystem ul 
{
    list-style: none;
}

.menusystem ul li ul 
{
    display: none;
    position: absolute;
    top: 1.6em;
    right: 0;
    background-color: #5C5957; /* this gives the whole thing a background color */
}

.menusystem li a 
{
    text-decoration: none;
}

.menusystem ul li.main_menu_li 
{
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 7px;
    margin-bottom: 7px; 

    display: block;
    float:right;

    margin-right:0.2em;
    text-align: center;
    border-left: solid 1px white;   
/*  line-height: 1em;   */
    height: 15px;
}

.menusystem ul li.main_menu_li_left
{
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 7px;    
    margin-bottom: 7px;     

    display: block;
    float:right;
    margin-right:0.2em;
    text-align: center;


/*  line-height: 1em;   */
    height: 15px;   
}

/* IE-Win (Holly hack) reads the list item line breaks, so lets hide those \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }


.menusystem li:hover ul, .menusystem li.mouseHover ul { 
    display: block;
}

.menusystem li ul.child_menu_ul li a
{
    color: #fff;


    font-size: 80%;
    text-shadow: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-top: 0px;
}


.menusystem li ul.child_menu_ul li.first a
{
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 14px;
    -webkit-border-top-left-radius: 14px;
    -webkit-border-top-right-radius: 14px;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
}


.menusystem li ul.child_menu_ul li.last a
{
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
        -moz-border-radius-bottomleft: 14px;
    -moz-border-radius-bottomright: 14px;
    -webkit-border-bottom-left-radius: 14px;
    -webkit-border-bottom-right-radius: 14px;
}


.menusystem li ul.child_menu_ul li a:hover 
{
    color: #ff0;
    background: #2e6ea4; 
}

/*.menusystem li.main_menu_li a */
.menusystem ul.child_menu_ul a
{
    color: #fff;            
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}

.menusystem li.main_menu_li a:hover 
{
    color: orange;
}

Ответы [ 2 ]

2 голосов
/ 29 февраля 2012 
.menusystem ul li.main_menu_li {
    border-left: solid 1px white; /* remove this */
}

Вам необходимо удалить вышеуказанную строку.

Пахнет как копировать и вставить мне:)

2 голосов
/ 29 февраля 2012

Это просто потому, что у вас есть border-left: solid 1px white; на .menusystem ul li.main_menu_li

...