Html 如何使绝对定位圆具有响应性？还是其他路线？

所以我的问题是，我如何使我的CSS圈是绝对定位的？圆圈（.full circle）位于导航按钮上方，悬停时会旋转。这是我的代码，我使用的是ASP.NETMVC

HTML----------

使用此。。。。。。。。。。
.整圈{
背景色：rgba（204,0,102,0）；
边框：3倍纯白；
高度：120px；
宽度：120px；
-moz边界半径：50%；
-webkit边界半径：50%；
位置：绝对位置；
左：0px；
边际：0px；
}

将其更改为

位置：相对

。。。。然后

边距：0自动
？？另一个问题，你想把它放在中心还是什么？好吧，我的下一个想法是只使用媒体查询，并在屏幕缩小时重新定位它。我希望能在导航系统中加入一些引导程序，使之更容易。我会尝试一下dvenkatsagar@BrandonCemprola我以前的评论，将允许你保持圆圈相对于菜单，以中间为中心。是的，对不起，我应该提一下。我的导航集中在我的页面上。请解释一下这段代码是如何解决这个问题的。这将帮助OP从您的答案中学习，并帮助未来的搜索者。
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @*@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
        </div>
        <div class="full-circle"></div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("About", "Index", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li>@Html.ActionLink("Work", "Work", "Home")</li>
            </ul>
            @*@Html.Partial("_LoginPartial")*@
            </div>

.full-circle {
 background-color: rgba(204, 0, 102, 0);
 border: 3px solid white;
 height: 120px;
 width: 120px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 position:absolute;
 margin-left:22em;
 top:0px;
}
.navbar-nav li {
width:200px;
height:50px;
text-align:center;
padding:0 0 0 0;
}
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

use this..........

<style>
.full-circle {
 background-color: rgba(204, 0, 102, 0);
 border: 3px solid white;
 height: 120px;
 width: 120px;
 -moz-border-radius:50%;
 -webkit-border-radius:50%;
 position:absolute;
 left:0px;
 margin:0px;
}

</style>