Выровняйте меню Superfish по правому краю - и остановите его - PullRequest
Новая
       13

Выровняйте меню Superfish по правому краю - и остановите его

0 голосов
/ 21 октября 2011

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

Когда я добавляю этот CSS, я могу сделать так, как я хочу, чтобы пункты меню имели фиксированную ширину: 

/*Menu item 1*/
#menu-item-117 .sub-menu {right: -125px;}
/*Menu item 2*/
#menu-item-73 {width:45px;}
#menu-item-73 .sub-menu {width:980px!important;right: -10px;}
/*Menu item 3*/
#menu-item-122 {width:65px;}
#menu-item-122 .sub-menu{width:980px!important;right: 165px;}

Однако это явно не идеально, поскольку меню должно быть динамичным ...

Есть ли способ достичь того, чего я хочу, с помощью CSS? Я надеюсь на это!

Я использую меню Superfish, которое поставляется с Theme Hybrid для Wordpress.

Заранее благодарим за любую помощь, которую вы можете предложить!

1 Ответ

0 голосов
/ 21 октября 2011

Я понял вашу точку зрения ... давайте посмотрим снова.

В этой сборке используется position: relative/absolute; вместо float: right/left;, и в ней есть один недостаток, упомянутый ниже.

Однако я не тестировалэто в старых браузерах, включая IE (протестировано в Chrome и Firefox), но я надеюсь, что это может дать вам некоторую идею для его реализации.:) 

#primary-menu .menu /* new rule */ {
  position: relative;
  height: 50px; /* The flaw is you have to fix the menu's height here */
}

#primary-menu ul {
    position: absolute;
    right: 0;
    top: 0;
}

#primary-menu li {
    float: left;
    list-style: none outside none;
    margin-left: 10px;
    position: relative;
}

.sub-menu {
    background: none repeat scroll 0 0 #244563;
    clear: both;
    display: none;
    font-size: 0.8em;
    overflow: visible;
    padding: 5px 0 !important;
    position: relative;
    right: 0;
    text-align: right;
    top: 30px !important;
    width: 700px !important;
}

.sub-menu li {
    display: inline !important;
    float: none !important;
    padding: 10px 0 !important;
    width: auto !important;
}
...